<template>

  <div class="problem-buttons">
    <div>
      <el-button v-if="problemId!==-1" type="primary" class="problem-button-class"
                 @click="goSubmission">查看记录
      </el-button>
    </div>
    <div>
      <el-button v-if="contestId!==-1" type="primary" class="problem-button-class"
                 @click="goContestRanking">查看比赛排名
      </el-button>
    </div>

    <!--    管理员直接编辑题目-->
    <div>
      <el-button v-if="problemId!==-1 && isAdminRole()" type="primary" class="problem-button-class"
                 @click="goEditProblem">编辑题目
      </el-button>
    </div>
  </div>
</template>

<script>
import {mapGetters} from "vuex";

export default {
  name: "ProblemButtons",
  props: {
    problemId: {
      type: Number,
      default: -1
    },
    contestId: {
      type: Number,
      default: -1
    }
  },
  methods: {
    ...mapGetters([
      'isAdminRole'
    ]),
    goSubmission() {
      this.$router.push({
        path: '/submission/list',
        query: {
          problemId: this.problemId,
          contestId: this.contestId
        }
      })
    },
    goContestRanking() {
      this.$router.push({
        name: 'contest-ranking',
        params: {
          contestId: this.contestId
        }
      })
    },
    goEditProblem() {
      this.$router.push({
        name: 'edit-problem',
        params: {
          problemId: this.problemId
        }
      })
    }
  }
}
</script>

<style scoped>
.problem-buttons {
  width: 100%;
}

.problem-button-class {
  width: calc(100% - 8px);
  margin: 4px;
}
</style>